<template>
	<div>
		<div class="logo">
			<div style="width: 30%;padding: ;">
				<img style="width: 100%;" src="../assets/ic.png" />
			</div>
			<div style="width: 70%;">
				<h4 style="color: #FFFFFF;margin: 0px 0px;padding: 15px 3px;">后台管理系统</h4>
			</div>
		</div>
		<el-col :span="24">
			<el-menu default-active="0" class="el-menu-vertical-demo"
			 @open="handleOpen" @close="handleClose"
			 background-color="#545c64"
			 text-color="#fff"
			 active-text-color="#ffd04b">
				
				<div v-for="(value,index,key) in origin" :keys="index">
					 <el-submenu :index="index+''">
					        <template slot="title">
					          <i :class="value.icon"></i>
					          <span>{{value.info}}</span>
					        </template>
					        <el-menu-item-group>
					          <el-menu-item  v-for="(value,inde,key) in value.project" :keys="inde">
								  <router-link :to="value.url">{{value.name}}</router-link>
							  </el-menu-item>
					        </el-menu-item-group>
					      </el-submenu>
				</div>
			</el-menu>
		</el-col>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				origin: [
					{
						info: "用户管理",
						icon:"el-icon-location",
						"project": [
							{
								"url":'/user/normal',
								"name":'学生列表',
							},
							{
								"url":'/user/admin',
								"name":'管理员列表',
							}
						]
					},
					{
						info: "题库管理",
						"project": [
							{
								"url":'/question/subject',
								"name":'科目列表',
							}
						]
					},
					{
						info: "试卷管理",
						"project": [
							{
								"url":'/paper/list',
								"name":'试卷列表',
							}
						]
					},
				]
			}
		},
		created() {

		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>
<style>
	.logo {
		display: flex;
		height: 50px;
		background-color: #2b2f3a;
	}
	a{
		color: #8C939D;
		text-decoration: none;
	}
	.router-link-active {
	    text-decoration: none;
	}
</style>
